<template>
    <div id="indexUsers">
        <el-card >
          <div slot="header">
            <span>用户中心</span>
          </div>
          <!-- 图片上传 -->
            <el-upload :with-credentials="true" name="avatar" :show-file-list="false"
             list-type="picture-card"
             :on-success="upSuccess"
             :before-upload="upBefore"
             accept="image/png,image/jpg"
              :action="baseUrl+`/users/avatar`"
              :limit="5">
              <img width="100%" height="100%" :src="url" alt="">
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
            </el-upload>
           
           <!-- 用户信息修改表 -->
            <table align="center"  cellpadding="10" cellspacing="0" width="100%">
              <thead>
                <th colspan="2" align="left">用户信息</th>
                <th align="left">操作</th>
              </thead>
              <tr>
                <td><i class="el-icon-service"></i> 用户名</td>
                <td>{{eformUsers.username}}</td>
                <td><el-button type="text" @click="edlVisible=true">修改用户名</el-button></td>
              </tr>
              <tr>
                <td><i class="el-icon-phone"></i> 联系方式</td>
                <td>{{eformUsers.phone}}</td>
                <td><el-button type="text" @click="phlVisible=true">修改联系方式</el-button></td>
              </tr>
               <tr>
                <td><i class="el-icon-edit-outline"></i> 邮箱地址</td>
                <td>{{eformUsers.email}}</td>
                <td><el-button type="text" @click="emlVisible=true">修改邮箱</el-button></td>
              </tr>
               <tr>
                <td><i class="el-icon-goods"></i>密码</td>
                <td>******</td>
                <td><el-button type="text" @click="visible=true">修改密码</el-button></td>
              </tr>
            </table>        
           
           <!-- 修改密码 -->
           <el-dialog
             title="修改密码"
             :visible.sync="visible"
             width="30%"
             :show-close="false">
             
              <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="原始密码">
                  <el-input v-model="form.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="form.newPassword"></el-input>
                </el-form-item>
              </el-form>
             <span slot="footer">
               <el-button @click="visible= false">取 消</el-button>
               <el-button type="primary" @click="resetPassword">确 定</el-button>
             </span>
           </el-dialog>
           
           <!-- 修改用户名 -->
           <el-dialog
             title="修改用户名"
             :visible.sync="edlVisible"
             width="40%"
             :show-close="false">
             
              <el-form :model="eformUsers" ref="eformUsers" label-width="100px" :rules="rules">
                <el-form-item label="用户名修改" prop="username">
                  <el-input v-model="eformUsers.username"></el-input>
                </el-form-item>
              </el-form>
             <span slot="footer">
               <el-button @click="edlVisible= false">取 消</el-button>
               <el-button type="primary" @click="edit">确 定</el-button>
             </span>
           </el-dialog>

            <!-- 修改联系方式 -->
           <el-dialog
             title="修改联系方式"
             :visible.sync="phlVisible"
             width="40%"
             :show-close="false">
             
              <el-form :model="eformUsers" ref="eformUsers" label-width="120px">
                <el-form-item label="修改联系方式" prop="phone">
                  <el-input v-model="eformUsers.phone"></el-input>
                </el-form-item>
              </el-form>
             <span slot="footer">
               <el-button @click="phlVisible= false">取 消</el-button>
               <el-button type="primary" @click="edit">确 定</el-button>
             </span>
           </el-dialog>

          <!-- 修改邮箱地址 -->
           <el-dialog
             title="修改邮箱地址"
             :visible.sync="emlVisible"
             width="40%"
             :show-close="false">
             
              <el-form :model="eformUsers" ref="eformUsers" label-width="120px">
                <el-form-item label="修改邮箱" prop="email">
                  <el-input v-model="eformUsers.email"></el-input>
                </el-form-item>
              </el-form>
             <span slot="footer">
               <el-button @click="emlVisible= false">取 消</el-button>
               <el-button type="primary" @click="edit">确 定</el-button>
             </span>
           </el-dialog>

        </el-card>
    </div>
</template>
<script>
export default {
  data() {
    let baseUrl = this.axios.defaults.baseURL
    return {
      users: [],
      form:{
        oldPassword:'',
        newPassword:'',
      },
      eformUsers: {},
      visible:false,
      edlVisible:false,
      phlVisible:false,
      emlVisible:false,
      baseUrl,
      url:baseUrl+this.store("loggedInfo").avatar,
      rules: {
        username: [
          {
            validator: (rule, val, callback) => {
              this.axios.get(`/users/exists/username/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.eformUsers = this.store("loggedInfo")
  },
  methods: {
    //获取
    getUsers() {
      this.axios
        .get("/users").then(res => {
          this.users = res.data.rows;
        }).catch(() => {});
    },
    //修改
       edit(){
         this.edlVisible = false;
         let loggedInfo = this.store("loggedInfo");
      this.axios.put(`/users/edit/${loggedInfo.id}`,{
        username:this.eformUsers.username,
        email:this.eformUsers.email,
        phone:this.eformUsers.phone,
      }).then((ret)=>{
        let loggedInfo = this.store("loggedInfo");
        loggedInfo.username = this.eformUsers.username;
        loggedInfo.phone = this.eformUsers.phone;
        loggedInfo.email = this.eformUsers.email;
        console.log( this.store("loggedInfo"));
        this.store("loggedInfo", loggedInfo);
        this.$message.success("更新成功");
        this.$root.$emit('storeUsername')
      })
    },
    // 重置密码
    resetPassword(){
      this.visible=false
      this.axios.post('/users/resetpassword',this.form).then((ret)=>{
        this.$message.success('密码修改成功')
      }).catch(()=>{
        this.$message.error('密码修改失败')
      })
    },
    // 上传图片成功
    upSuccess(ret, file) {
      this.url = this.baseUrl+ret;
      let loggedInfo = this.store("loggedInfo");
      loggedInfo.avatar = ret;
      this.store("loggedInfo", loggedInfo);
      this.$message.success("头像上传成功");
      this.$root.$emit('upImg')
    },
    //上传图片之前
    upBefore(file) {
      if (file.size / 1024 / 1024 > 2) {
        this.$message.error("图片大小不能超过2M");
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>
<style>
#personal table{
  border-bottom-color: red;
      border-top-width: 10px;
}
</style>


